<%@page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script>
    $(document).ready(function () {

        $('#containerChartPlusWeekly').highcharts({
            chart: {
                type: 'column',
                margin: [ 50, 50, 100, 80],
                backgroundColor:'rgba(255, 255, 255, 0.1)'
            },
            title: {
                text: '<s:property value="thisWeeksStr"/>'
            },
            xAxis: {
                categories: [
                    {user: '<s:property value="thisWeeksPlusSigns.get(0).getUsername()"/>', url: '<s:property value="thisWeeksPlusSigns.get(0).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksPlusSigns.get(1).getUsername()"/>', url: '<s:property value="thisWeeksPlusSigns.get(1).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksPlusSigns.get(2).getUsername()"/>', url: '<s:property value="thisWeeksPlusSigns.get(2).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksPlusSigns.get(3).getUsername()"/>', url: '<s:property value="thisWeeksPlusSigns.get(3).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksPlusSigns.get(4).getUsername()"/>', url: '<s:property value="thisWeeksPlusSigns.get(4).getPictureUrl()"/>'}
                ],
                labels: {
                    formatter: function() {
                        return '<div style="float:left;"><em style="font-size:10px;">@' + this.value.user + '</em></div>';
                    },
                    useHTML: true,
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '(+)'
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '+',
                data: [<s:property value="thisWeeksPlusSigns.get(0).getCount()"/>,
                    <s:property value="thisWeeksPlusSigns.get(1).getCount()"/>,
                    <s:property value="thisWeeksPlusSigns.get(2).getCount()"/>,
                    <s:property value="thisWeeksPlusSigns.get(3).getCount()"/>,
                    <s:property value="thisWeeksPlusSigns.get(4).getCount()"/>],
                dataLabels: {
                    enabled: true,
                    color: '#FFFFFF',
                    y: 19,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    },
                    useHTML: true,
                    formatter: function() {
                        return ("<img src='" + this.x.url + "' width='30' height='30'/><div align='center'>" + this.y + "</div>");
                    }
                }
            }],
            exporting: { enabled: false },
            tooltip: { enabled: false }
        });

        $('#containerChartMinusWeekly').highcharts({
            chart: {
                type: 'column',
                margin: [ 50, 50, 100, 80],
                backgroundColor:'rgba(255, 255, 255, 0.1)'
            },
            title: {
                text: '<s:property value="thisWeeksStr"/>'
            },
            xAxis: {
                categories: [
                    {user: '<s:property value="thisWeeksMinusSigns.get(0).getUsername()"/>', url: '<s:property value="thisWeeksMinusSigns.get(0).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksMinusSigns.get(1).getUsername()"/>', url: '<s:property value="thisWeeksMinusSigns.get(1).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksMinusSigns.get(2).getUsername()"/>', url: '<s:property value="thisWeeksMinusSigns.get(2).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksMinusSigns.get(3).getUsername()"/>', url: '<s:property value="thisWeeksMinusSigns.get(3).getPictureUrl()"/>'},
                    {user: '<s:property value="thisWeeksMinusSigns.get(4).getUsername()"/>', url: '<s:property value="thisWeeksMinusSigns.get(4).getPictureUrl()"/>'}
                ],
                labels: {
                    formatter: function() {
                        return '<div style="float:left;"><em style="font-size:10px;">@' + this.value.user + '</em></div>';
                    },
                    useHTML: true,
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '(-)'
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '-',
                data: [<s:property value="thisWeeksMinusSigns.get(0).getCount()"/>,
                    <s:property value="thisWeeksMinusSigns.get(1).getCount()"/>,
                    <s:property value="thisWeeksMinusSigns.get(2).getCount()"/>,
                    <s:property value="thisWeeksMinusSigns.get(3).getCount()"/>,
                    <s:property value="thisWeeksMinusSigns.get(4).getCount()"/>],
                dataLabels: {
                    enabled: true,
                    color: '#FFFFFF',
                    y: 19,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    },
                    useHTML: true,
                    formatter: function() {
                        return ("<img src='" + this.x.url + "' width='30' height='30'/><div align='center'>" + this.y + "</div>");
                    }
                }
            }],
            exporting: { enabled: false },
            tooltip: { enabled: false }
        });

        $(".weeklySearch").live('keyup', function (e) {
            var code = e.which || e.keyCode || e.charCode;
            if (code == 13) {
                e.preventDefault();
                var sign = $(this).attr('sign') === '+' ? '%2B' : '%2D';
                $.blockUI({ message: $('#domMessage')});
                $('#tweetRefDiv').load("UserSearch.action?interval=weekly&username=" + $(this).val() + '&sign=' + sign, function() {
                    $('#tweetRef').trigger('click');
                });
            }
        });
    });
</script>
<div class="pageContainer2" style="display: none;">
    <div class="positiveValues positiveTarih1">
        <div class="getTableValues">
            <div class="getTableInfo"><h3 style="color:green;">En çok (+)'lananlar <img title="@kullaniciadi + @liyorum formatıyla tweet atıp sizde istediğiniz ismi artılayabilirsiniz." class="imgTooltip" src="resources/img/infobg.png"></h3><div align="center"><input type="text" placeholder="@kullaniciadi" class="weeklySearch" sign="+" value=""><div class="searchWithMe"></div></div></div>
            <div class="getScrollView  weeklyPlusScroll">
                <s:iterator var="signBean" value="thisWeeksPlusSigns" status="stat">
                    <div class="getProfileBox">
                        <div class="profileIndex"><s:property value="#stat.index + 1"/>.</div>
                        <div class="profilePic"><a href="javascript:;" style="cursor:pointer;" onclick="showTweets('<s:property value="#signBean.username"/>', '%2B');"><img src="<s:property value="#signBean.pictureUrl"/>" width="40" height="40"/></a></div>
                        <div class="profileAbout"><p>@<s:property value="#signBean.username"/></p></div>
                        <div class="profileCount"><em class="positiveClass">+<s:property value="#signBean.count"/></em></div>
                    </div>
                </s:iterator>
            </div>
        </div>
        <div class="getChartValues">
            <div id="containerChartPlusWeekly" style="width: 660px; height: 400px;"></div>
        </div>
    </div>

    <div class="littleHeader" style="height:1px;background:#eee;"></div>
    <div class="littleHeader" style="height:1px;background:#f1f1f1;"></div>
    <div class="littleHeader" style="height:1px;"></div>

    <div class="negativeValues positiveTarih1">
        <div class="getChartValues">
            <div id="containerChartMinusWeekly" style="width: 660px; height: 400px;"></div>
        </div>
        <div class="getTableValues">
            <div class="getTableInfo"><h3 style="color:red;">En çok (-)'lenenler <img title="@kullaniciadi - @liyorum formatıyla tweet atıp sizde istediğiniz ismi eksileyebilirsiniz." class="imgTooltip" src="resources/img/infobg.png"></h3><div align="center"><input type="text" placeholder="@kullaniciadi" class="weeklySearch" sign="-" value=""><div class="searchWithMe"></div></div></div>
            <div class="getScrollView  weeklyMinusScroll">
                <s:iterator var="signBean" value="thisWeeksMinusSigns" status="stat">
                    <div class="getProfileBox">
                        <div class="profileIndex"><s:property value="#stat.index + 1"/>.</div>
                        <div class="profilePic"><a href="javascript:;" style="cursor:pointer;" onclick="showTweets('<s:property value="#signBean.username"/>', '%2D');"><img src="<s:property value="#signBean.pictureUrl"/>" width="40" height="40"/></a></div>
                        <div class="profileAbout"><p>@<s:property value="#signBean.username"/></p></div>
                        <div class="profileCount"><em class="negativeClass">-<s:property value="#signBean.count"/></em></div>
                    </div>
                </s:iterator>
            </div>
        </div>
    </div>
</div>